<template>
  <!-- 弹出层 -->
  <el-dialog v-model="dialogVisible" :title="isCreate ? '添加权限' : '编辑权限'" width="50%" :before-close="closePermissionAdd">
    <!-- 内容部分 -->
    <div class="permissionDialog_Form">
      <el-form size="small" :model="permissionForm" ref="permissionFormRef" label-width="120px" :rules="permissionFormRules">
        <el-form-item label="权限名称" prop="authName">
          <el-input v-model="permissionForm.authName"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="path">
          <el-input v-model="permissionForm.path"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="permissionForm.sort" type="number"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="isButton">
          <el-switch v-model="permissionForm.isButton" active-text="按钮" inactive-text="菜单" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="permissionForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="操作" prop="action">
          <el-input v-model="permissionForm.action" placeholder="按钮权限必填"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="linkUrl">
          <el-input v-model="permissionForm.linkUrl"></el-input>
        </el-form-item>
        <el-form-item label="组件名称" prop="componentName">
          <el-input v-model="permissionForm.componentName" placeholder="页面必填"></el-input>
        </el-form-item>
        <el-form-item label="父权限">
          <el-cascader v-model="permissionForm.parentId" ref="cascaderRef" :options="permissionList" :props="cascaderProps" clearable />
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部按钮部分 这是一个具名插槽-->
    <template #footer>
      <div>
        <el-button type="success" size="small" @click="submitPermissionAdd">提交</el-button>
        <el-button type="default" size="small" @click="closePermissionAdd">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance, useSSRContext, watch, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { updatePermission, addPermission } from "network/permissions.js";

const store = useStore();
const router = useRouter();
const { proxy } = getCurrentInstance();
let props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  isCreate: {
    type: Boolean,
    default: false,
  },
  permissionForm: {
    type: Object,
    default() {
      return {};
    },
  },
  permissionList: {
    type: Array,
    default() {
      return [];
    },
  },
});
const emits = defineEmits(["closePermission", "refreshPermissionList"]);
const permissionFormRef = ref(null);
const cascaderRef = ref(null);
const permissionFormRules = reactive({
  authName: [
    {
      required: true,
      message: "请输入权限名称",
      trigger: "blur",
    },
  ],
  sort: [
    {
      required: true,
      message: "排序号不可以为空",
    },
  ],
});
const options = {
  value: "id",
  label: "authName",
  children: "children",
};
const cascaderProps = {
  checkStrictly: true,
  expandTrigger: "hover",
  value: "id",
  label: "authName",
  children: "children",
};
const closePermissionAdd = () => {
  emits("closePermission");
};

const submitPermissionAdd = async () => {
  permissionFormRef.value.validate(async (valid) => {
    if (valid) {
      let res = ref({});
      const node = cascaderRef.value.getCheckedNodes();
      if (node) props.permissionForm.parentId = node[0].value;
      if (props.isCreate.value) res = await addPermission(props.permissionForm);
      else res = await updatePermission(props.permissionForm);
      if (!res.success) return proxy.$notify.error({ message: res.msg, showClose: true });
      proxy.$notify.success({ message: res.msg, showClose: true });
      emits("refreshPermissionList");
      closePermissionAdd();
    }
  });
};
</script>
<style lang="less" scoped></style>
